<template>
    <div class="dahezi">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item >🏠</el-breadcrumb-item>
            <el-breadcrumb-item>用户信息</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="hezi">
            <div class="hezi2">
                <div class="hezi3">
                    <div class="big">

                        <div class="leftContent">
                            <div class="anniuhang">
                                <el-button @click="wenzhangshow = false, topicshow = true, xuetanghejiankangxinxi = false">
                                    帖子
                                </el-button>
                                <el-button v-if="userRole == '糖尿病患者'" @click="xuetanghejiankangxinxi = true, topicshow = false, wenzhangshow = false">
                                    血糖
                                </el-button>
                                <el-button v-if="userRole == '医生'"  @click="wenzhangshow = true, topicshow =false, xuetanghejiankangxinxi = false ">
                                    文章
                                </el-button>
                            </div>
                            <div class="showneirong">
                                <div v-show="wenzhangshow">
                                    <wenzhang :list="articles"> </wenzhang>
                                </div>
                                <div v-show="topicshow">
                                    <tiezi :list="topics"> </tiezi>
                                </div>
                                <div v-show="xuetanghejiankangxinxi">
                                    <xuetang :list="bloodSugars"> </xuetang>
                                    <jiankangxinxi :healthy="healthInformation"> </jiankangxinxi>
                                </div>
                            </div>

                        </div>

                        <div class="rightAvatar">
                            <img :src="basicUserInformation.avatar" style="width: 200px;height: 200px ;margin-left: 15px">
                            <br/>
                            <!--                    <div class="shang">-->
                            {{basicUserInformation.username}}( {{userRole}} )<br/>
                            <div v-if="basicUserInformation.sex == '女'">♀</div>
                            <div v-else-if="basicUserInformation.sex== '男'">♂</div>
                            <div v-if="flag === '' ">
                                关注({{basicUserInformation.countAttention}})
                            </div>
                            <div v-else>
                                <el-tooltip class="item" effect="dark"  placement="top-start">
                                    <div slot="content" class="tips">
                                        <div class="content">
                                            <p>{{contentTip}}</p>
                                        </div>
                                    </div>
                                    <el-button @click="guanzhu" size="mini">关注({{basicUserInformation.countAttention}})</el-button>
                                </el-tooltip>
                            </div>

                             |粉丝({{basicUserInformation.countFans}})<br/>
                            个人介绍：{{basicUserInformation.introduction}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Tiezi from "./tiezi"
    import Wenzhang from "./wenzhang"
    import Xuetang from "./xuetang";
    import Jiankangxinxi from "./jiankangxinxi";
    export default {
        name: "yonghuxinxichaxun",
        components: {
            Tiezi,
            Xuetang,
            Wenzhang,
            Jiankangxinxi,
        },
        data(){
            return{
                userId:'',
                basicUserInformation:'',
                userRole:'',
                healthInformation:'',
                bloodSugars:[],
                topics:[],
                xuetangs:'',
                articles:[],
                xuetanghejiankangxinxi: false,
                wenzhangshow: false,
                topicshow: true,
                flag: '',
                contentTip:'',
            }
        },
        created() {
            this.yonghuxinxichaxun()
            this.chakanguanzhu()
        },
       methods: {
           async yonghuxinxichaxun() {
               await this.$http.get(`user/${this.$route.query.id}`).then(res => {
                   console.log(res.data.data);
                   if (res.data.code == 200) {
                       this.basicUserInformation = res.data.data.basicUserInformation;
                       console.log(this.basicUserInformation);
                       this.userId = this.basicUserInformation.id;
                       this.xuetangs = res.data.data.bloodSugars;
                       this.bloodSugars = res.data.data.bloodSugars;
                       this.userRole = res.data.data.userRole;
                       this.healthInformation = res.data.data.healthInformation;
                       this.topics = res.data.data.topics;
                       this.articles = res.data.data.articles;
                   }
                   this.reload();
               })
           },
           async chakanguanzhu() {
               const token = sessionStorage.getItem("token");
               if(token != null){
                   this.$http.defaults.headers.common['Authorization'] = token;
               }
               await this.$http.get('user/flagAttention?attentionId='+this.userId).then(res => {
                   console.log("查看是否关注："+res.data.data);
                   if(res.data.code == 200){
                       if(res.data.data){
                           this.flag = true;
                           this.contentTip = "点击取消关注";
                       }else {
                           this.flag = false;
                           this.contentTip = "点击关注";
                       }
                   }
                   console.log("flag" + this.flag);
               })
           },
           async guanzhu(){
               const token = sessionStorage.getItem("token");
               this.$http.defaults.headers.common['Authorization'] = token;
               if(this.flag){
                   await this.$http.get('user/cancelAttention?attentionId='+this.userId).then(res => {
                       if (res.data.code == 200) {
                           this.yonghuxinxichaxun();
                           this.chakanguanzhu();
                       }
                   })
               }
               else{
                   await this.$http.get('user/insertAttention?attentionId='+this.userId).then(res => {
                       if (res.data.code == 200) {
                           this.yonghuxinxichaxun();
                           this.chakanguanzhu();
                       }
                   })
               }

           }
       }
    }
</script>

<style scoped>
    .hezi{
        width: 80%;
        min-height: 900px;
        height: auto!important;
        display: flex;
        justify-content:center;
        align-items:center;
    }
    .hezi2{
        width: 100%;
        background-color: white;
        min-height: 850px;
        height: auto!important;
        margin-top: 3px;
    }
    .hezi3{
        width: 100%;
        background: white;
    }
    .big{
        width: 100%;
        min-height: 600px;
        height: auto!important;
        /*border: white solid 2px;*/
        display: flex;
    }
    .leftContent{
        width: 80%;
        /*border: black solid 2px;*/
    }
    .rightAvatar{
        width: 20%;
        margin-top: 100px;
        /*border: yellowgreen solid 2px;*/
        text-align: center;
    }
    .anniuhang{
        width: 100%;
        height: 38px;
    }
    .showneirong{
        width: 100%;
        min-height: 300px;
        height: auto!important;
    }
</style>
